<template>
<view>
    <!-- 导航栏 -->
    <!-- <navigation :showIcon="true" title="进店记录"></navigation> -->
    <view class="nav">
        <van-nav-bar title="进店记录" left-text="返回" left-arrow @click-left="onClickLeft" />
    </view>
    <view class="from">
        <van-field readonly clickable disabled name="picker" :value="details.store_id" v-model="details.store_id" label="预约门店" input-align="right" />
        <!-- 预约时间 -->
        <van-field readonly clickable name="picker" :value="details.subscribe_time" v-model="details.subscribe_time" label="预约时间" @click="showCalendar1 = true" input-align="right" />
        <van-calendar v-model="showCalendar1" :min-date="minDate" @confirm="confirmSubscribe" color="#406CEB" />
        <!-- 进店时间 -->
        <van-field readonly clickable name="picker" :value="details.real_time" v-model="details.real_time" label="进店时间" @click="showCalendar2 = true" input-align="right" />
        <van-calendar v-model="showCalendar2" :min-date="minDate" @confirm="confirmToshop" color="#406CEB" />
        <!--进店状态-->
        <view class="list_box" @click="showTwoPicker_linkage">
            <view class="cell">
                <text>进店状态</text>
                <view v-if="JSON.stringify(into_status_list)!='[]'">
                    <input type="text" v-model="into_status_list[details.status].title" disabled="" placeholder="请选择进店状态" />
                </view>
            </view>
        </view>
        <wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex" @onConfirm="onConfirm"></wzp-picker>
        <!-- 状态标签 多选 -->
        <van-cell v-if="remark_values.length">
            <template #title>
                <span>状态标签</span>
            </template>
            <template #label>
                <van-tag style="margin: 0 5px 5px 0;" v-for="(item,index) in remark_values" :key="index" closeable size="medium" type="primary" @close="deletRemark(index)">
                    {{item}}
                </van-tag>
            </template>
        </van-cell>
        <uni-popup ref="popup" type="center">
            <view class="comment_center">
                <checkbox-group class="uni-list" @change="remarkChange">
                    <label class="uni-list-cell uni-list-cell-pd" v-for="item in remark_array" :key="item.id">
                        <view style="display: flex;justify-content: left;align-items: center;">
                            <checkbox :value="item.id" :checked="item.checked" style="transform: scale(0.6); "></checkbox>
                            <view>{{item.title}}</view>
                        </view>
                    </label>
                </checkbox-group>
            </view>
        </uni-popup>
        <!-- 下次进店时间 -->
        <van-field readonly clickable name="picker" :value="details.next_time" v-model="details.next_time" label="下次进店时间" @click="showCalendar3 = true" input-align="right" />
        <van-calendar v-model="showCalendar3" :min-date="minDate" @confirm="confirmToshopnext" color="#406CEB" />
        <!-- 备注 -->
        <van-field v-model="details.remark" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" input-align="right" @input="getRemark" />
    </view>
    <!-- 提交按钮 -->
    <van-goods-action>
        <van-goods-action-icon />
        <van-goods-action-button text="提交" @click="saveDataFn" color="#406CEB" />
        <van-goods-action-icon />
    </van-goods-action>
</view>
</template>

<script>
import wzpPicker from "@/component/wzp-picker/wzpPicker.vue";
import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
import navigation from '@/component/navigation.vue'
import selectBox from '@/component/selectBox.vue'
import sun from '@/utils/sun.js'
export default {
    components: {
        navigation,
        timeSelector,
        selectBox,
        wzpPicker
    },
    data() {
        return {
            edit: 1, //
            details: {}, //信息
            into_status_list: [], //进店状态
            statusTitle: '',
            shopValue: '',
            options: '',

            reviewStatus: [], //回访状态
            reviewStatusValue: [
                [],
                []
			], //回访状态		            
			mode: "",
            pickerList: [],
            defaultIndex: [],
            timesIndex: [0, 0],
            pickerValue: '',
            note: {},
            remark_array: [],
            remark_values: [],
            other: false, //客户备注选择
            cause: [],
            showCalendar1: false, //预约时间日历显示
            showCalendar2: false, //进店时间日历显示
            showCalendar3: false, //下次进店时间日历显示
            minDate: new Date(2021, 0, 1), //日历可选择的最小日期
            showIntostatus: false, //进店状态picker显示
            toshopStatus: ''
        };
    },
    onLoad(options) {
        // let pages = getCurrentPages()//获取页面的值
        this.options = options;
        this.editDataFn(options.id)
    },
    methods: {
        // 返回上个页
        onClickLeft() {
            uni.navigateBack({
                delta: 1
            });
        },
        // 选择预约时间
        confirmSubscribe(date) {
            this.details.subscribe_time = `${date.getFullYear()}-${date.getMonth() +1}-${date.getDate()}`;
            this.showCalendar1 = false;
        },
        // 选择进店时间
        confirmToshop(date) {
            this.details.real_time = `${date.getFullYear()}-${date.getMonth() +1}-${date.getDate()}`;
            this.showCalendar2 = false;
        },
        // 下次进店时间
        confirmToshopnext(date) {
            this.details.next_time = `${date.getFullYear()}-${date.getMonth() +1}-${date.getDate()}`;
            this.showCalendar3 = false;
        },
        //获取备注
        getRemark(row) {
            this.details.remark = row;
        },
        //多选
        remarkChange(e) {
            let value = e.detail.value
            this.remark_values = []
            this.remark_array.map((item, index) => {
                value.map((items, indexs) => {
                    if (item.id == items) {
                        if (item.title == '其他') this.other = true
                        this.remark_values.push(item.title)
                    }
                })
            })
        },
        deletRemark(index) {
            this.remark_values.splice(index, 1)
        },
        //删除多选
        // deleteRemarkFn(index){
        // 	this.remark_values.splice(index,1)
        // },
        onConfirm(e) {
            if (this.edit == 0) {
                return
            }
            this.timesIndex = e;
            this.details.status = e[0]
            this.pickerValue = this.pickerList[e[0]].title
            this.note = this.pickerList[e[0]].children[e[1]]
            if (this.pickerList[e[0]].children.length > 0) {
                this.$refs.popup.open();
                this.remark_array = []
                this.pickerList[e[0]].children.map((item, index) => {
                    this.remark_array.push(item)
                })
            }
            // if (this.note) {
            // 	this.details.remark = this.note.title
            // } else {
            // 	this.details.remark = ''
            // }
        },
        // 双列联动初始化
        showTwoPicker_linkage() {
            this.mode = 'one';
            this.pickerList = this.reviewStatus;
            this.defaultIndex = [0, 0];
            this.$refs.wzpPicker.showPicker();
        },
        //进店状态
        pickerStatus(e) {
            this.details.status = e.detail.value
        },
        onChange(picker, value, index) {
            console.log(picker, value, index);
        },
        //获取编辑信息
        editDataFn(id) {
            let that = this
            sun.request({
                url: "/h5/customer.enter/edit",
                showLoading: true,
                token: true,
                data: {
                    id: id
                },
                success(res) {
                    if (res.code == 200) {
                        that.into_status_list = res.data.into_status_list;
                        that.details = res.data.details;
                        that.statusTitle = that.into_status_list[res.data.details.status].title
                        that.edit = res.data.edit;
                        that.remark_values = res.data.cause;
                        that.reviewStatus = res.data.into_status_list
                        that.reviewStatus.map((item, index) => {
                            that.reviewStatusValue[0].push(item.title)
                            if (index == 0) {
                                that.reviewStatusValue[1] = item.children
                            }
                        })
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })
        },
        //预约时间 确定
        makeConfirm(e) {
            if (this.edit === 0) {
                return
            }
            this.details.subscribe_time = e.key
        },
        //进店时间
        baguetteConfirm(e) {
            if (this.edit == 0) {
                return
            }
            this.details.real_time = e.key
        },
        nextConfirm(e) {
            if (this.edit == 0) {
                return
            }
            this.details.next_time = e.key
        },
        //预约门店输入
        applyShop(e) {
            this.shopValue = e.detail.value;
        },
        //点击选取的酒店
        clickHolet(e) {
            this.selectedHotel = e
            this.details.store_id = e.title;
            this.details.Hotelid = e.id
            this.shopValue = '';
        },
        //编辑保存
        saveDataFn() {
            if (this.edit == 0) {
                uni.showToast({
                    icon: "none",
                    title: '没有保存权限'
                })
                return
            }
            let that = this
            sun.request({
                url: "/h5/customer.enter/doEdit",
                showLoading: true,
                token: true,
                data: {
                    id: that.options.id,
                    real_time: that.details.real_time,
                    next_time: that.details.next_time,
                    remark: that.details.remark,
                    status: that.details.status,
                    cause: that.remark_values,
                },
                success(res) {
                    if (res.code == 200) {
                        let pages = getCurrentPages() // 当前页面
                        let beforePage = pages[pages.length - 2] // 前一个页面
                        uni.navigateBack({
                            delta: 1,
                            success: function () {
                                // beforePage.onLoad() // 执行前一个页面的onLoad方法       
                            }

                        })
                    }
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>
// 为不影响公共样式
page {
    padding-top: 0 !important;
    padding-bottom: 120upx;
}

.nav {
    width: 100%;
    position: fixed;
    left: 0;
	top: 0;
	z-index: 999;
}

.from {
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

.list_box {
    // display: flex;
    // justify-content: space-between;
    font-size: 14px;
    color: #646566;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;

    // border-bottom: 1upx solid rgba(226, 226, 226, 1);
    .cell {
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        font-size: 14px;
        color: #646566;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(235, 237, 240, 0.5);
    }

    text {
        font-size: 26upx;
        font-family: PingFang SC;
        font-weight: 500;
        // color: rgba(142, 142, 142, 1);
    }

    input {
        font-size: 26upx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(30, 30, 30, 1);
        text-align: right;
    }
}

.hotel_name {
    font-size: 26upx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(30, 30, 30, 1);
}

.save_btn {
    width: 100%;
    height: 73upx;
    margin-top: 100upx;

    button {
        width: 686upx;
        height: 100%;
        background: rgba(64, 108, 235, 1);
        ;
        border-radius: 36upx;
        line-height: 73upx;
        text-align: center;
        color: #ffffff;
    }

}

.remark_array {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.remark_list {
    margin-bottom: 10upx;
    margin-right: 40upx;
    padding: 10rpx 30rpx;
    background: #007AFF;
    border-radius: 20upx;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.remark_title {
    color: #FFFFFF !important
}

.remark_Close {
    color: #FFFFFF !important;
    position: absolute;
    top: -10upx;
    right: -10upx;
    color: #FFFFFF;
    background: red;
    border-radius: 50%;
    display: inline-block;
    width: 35upx;
    height: 35upx;
    line-height: 35upx;
}

.comment_center {
    border-radius: 10upx;
    padding: 30upx;
    background: #FFFFFF;
    font-size: 23upx;
}
</style>
